<template>
    <div>
        <button @click="setLoading">加载指令</button>
        <div v-customLoading="loading" class="content">
            内容区域塑料袋菲利克斯打了客服考拉双打卡理发手打上课打开方式快递费离开手打
        </div>
        <ListContainer class="content" :loading="loading" :list="dataList">
            <div v-for="item in dataList" :key="item.id">
                {{ item.name }}
            </div>
        </ListContainer>

    </div>
</template>

<script setup>
import ListContainer from '@/components/ListContainer.vue'
import { ref } from 'vue'

const loading = ref(false)
const dataList = ref([])
const setLoading = () => {
    loading.value = true
    dataList.value = []
    setTimeout(() => {
        for (let i = 1; i < 10; i++) {
            const obj = {
                id: i,
                name: '山东科技尖峰时刻代付款较大刷卡机手打'
            }
            dataList.value.push(obj)
        }
        loading.value = false
    }, 500)
}
setLoading()
</script>

<style lang='less' scoped>
h1 {
    text-align: center;
}

.content {
    height: 300px;
}
</style>